import { useEffect, useState } from 'react'
import { Steps, Checkbox, Col, Row, Divider } from 'antd'
import { SearchOutlined, PlusSquareTwoTone, BookTwoTone } from '@ant-design/icons'
import { useLocation, useNavigate } from 'react-router-dom'
import { routers } from 'routers'
import styles from './index.module.scss'
import type { CheckboxValueType } from 'antd/lib/checkbox/Group'
import { useTranslation } from 'react-i18next'
import { useAppDispatch, useAppSelector } from 'store/hook'
import { changeLang } from 'store/slices/systemSlice'

export default function ActionBar() {
  const navigate = useNavigate()
  const location = useLocation()
  const { t } = useTranslation()
  const [current, setCurrent] = useState(0)
  const dispatch = useAppDispatch()
  const { lang } = useAppSelector(state => state.system)
  // 由于要做成单选，所以这里类型定义为元组
  const [checkedLanguages, setCheckedLanguages] = useState<[CheckboxValueType]>([lang])

  // 路由改变
  useEffect(() => {
    const index = routers.findIndex(item => item.path === location.pathname)
    setCurrent(index)
  }, [location.pathname])

  // 语言切换
  const onLanguageChange = (languages: CheckboxValueType[]) => {
    const checkedLanguagesTemp: [CheckboxValueType] = [...checkedLanguages]
    if (languages.length === 0) {
      // 设置多选框状态
      setCheckedLanguages(checkedLanguagesTemp)
      // 设置 redux 语言状态
      dispatch(changeLang(checkedLanguagesTemp[0] as Language))
    } else {
      const languagesTemp = languages.filter(item => checkedLanguagesTemp.indexOf(item) === -1) as [CheckboxValueType]
      setCheckedLanguages(languagesTemp)
      dispatch(changeLang(languagesTemp[0] as Language))
    }
  }

  return (
    <div className={`${styles['action-bar']} p10`}>
      <h2 className='tac'>{t('actionBar.actionBar')}</h2>
      <Divider orientation='left' plain>
        {t('actionBar.navigation.navigation')} 🧭
      </Divider>
      <Steps direction='vertical' current={current} onChange={value => navigate(routers[value].path)}>
        <Steps.Step title={t('actionBar.navigation.querySign')} description={t('actionBar.navigation.querySignDesc')} icon={<SearchOutlined />} />
        <Steps.Step title={t('actionBar.navigation.customSign')} description={t('actionBar.navigation.customSignDesc')} icon={<PlusSquareTwoTone />} />
        <Steps.Step title={t('actionBar.navigation.manual')} description={t('actionBar.navigation.manualDesc')} icon={<BookTwoTone />} />
      </Steps>
      <Divider orientation='left' plain>
        {t('actionBar.lang.language')} 🌐
      </Divider>
      <Checkbox.Group style={{ width: '100%' }} defaultValue={['zh']} value={checkedLanguages} onChange={onLanguageChange}>
        <Row>
          <Col lg={{ span: 10, offset: 2 }}>
            <Checkbox value='zh'>{t('actionBar.lang.chinese')}</Checkbox>
          </Col>
          <Col lg={{ span: 12 }}>
            <Checkbox value='en'>{t('actionBar.lang.english')}</Checkbox>
          </Col>
        </Row>
      </Checkbox.Group>
    </div>
  )
}
